<template>
  <div class="index drillGuide">
    <Header></Header>
    <div class="main">
         <p class="current-nav">
            当前位置 :
            <router-link to="index">首页</router-link>
            <i>></i>
            应急演练指导
        </p>
      <div class="mianOut">
        <div class="mianInner1">
            <div class="asTitle">
                <h3>应急演练指导</h3>
            </div>
            <div class="downBox clearfix" style="margin-top:0;padding-top:40px;">
                <h4 class="table_tit">常见事故应急演练模板</h4>
            </div>
            <el-table
                ref="multipleTable"
                :data="data1"
                row-key="fileId">
                <el-table-column type="index" align="center" label="序号" width="100">
                </el-table-column>                       
                <el-table-column prop="drillContent" label="演练内容" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="140">
                    <template slot-scope="scope">
                        <el-button size="small" @click="upload(scope.row)">导出</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-container">
                <el-pagination
                    
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
                <el-button>确定</el-button>
            </div>
          
            <div class="downBox clearfix">
                <h4 class="table_tit">应急演练通用模板</h4>
                <a class="download"
                @click="downloadTemp('all')"><i class="el-icon-download"></i>下载模板</a>
            </div>
            <el-table ref="multipleTable"
                        v-loading='loadingFlag'
                        @selection-change="handleSelectionChange"
                        :data="data2"
                        row-key="fileId">
                <el-table-column type="index"
                                align='center'
                                label='序号'
                                width="100">
                </el-table-column>
                <el-table-column label=''
                                :reserve-selection="true"
                                type="selection"
                                align='center'
                                width="100">
                </el-table-column>
                <el-table-column label="文件名称"
                                align='center'
                                prop="templateName">
                </el-table-column>
                <el-table-column label="操作"
                                align='center'
                                width="140">
                <template slot-scope="scope">
                    <el-button class='grp1' @click='getDetail(scope.row)'>查看</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
import config from "../../config.js"
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      loadingFlag: false,
      downIds: [],
      templateId: '',
      data1: [],
      data2: [],
      currentPage: 1,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      tableType:'',
      drillContent:''
    };
  },
  created () {
    this.getList1()
    this.getList2()
  },
  methods: {
    upload(row){
        this.$axios({
            method: "get",
            responseType: 'blob',//防止返回乱码
            url: config.baseUrl + 'emergency/v1.0/drill/export/' + row.id    
        }).then(res => {
            if (res.status == 200) {
                const data = res.data;
                const blob = new Blob([data], {type: "application/zip"});
                const blobUrl = window.URL.createObjectURL(blob);
                this.download(blobUrl, row.drillContent) ;
            } else {
                this.$message({
                    message: '导出失败！',
                    type: "error"
                });
            }
        })
        .catch(response => {
            console.log(response);
        });
    },
    download(blobUrl, name) {
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = name;
        a.href = blobUrl;
        a.click();
    },
    getDetail (row) {
        this.$axios
        .get(config.baseUrl + 'emergency/v1.0/drill/info/' + row.fileId)
        .then(res => {
          if (res.data.meta.success) {
            window.open(res.data.data)
          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    getList1 () {   //常用事故应急演练模板列表查询
        let params = {
            businessId : localStorage.businessId,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        }
      this.$axios({
        method: "post",
        url: config.baseUrl + "emergency/v1.0/drill/list",
        data: params
      }).then(res => {
          if (res.data.meta.success) {
            this.data1 = res.data.data.records
            this.total = res.data.data.total
          } else {
            this.data1=[]
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    getList2 () {   //应急演练通用模板列表查询
      this.$axios
        .get(config.baseUrl + 'emergency/v1.0/drill/common/list')
        .then(res => {
          if (res.data.meta.success) {
            this.data2 = res.data.data
          } else {
            this.data2=[]
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    downFile (id) {
      this.$axios
        .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/querybyid?id=' + id)
        .then(res => {
          if (res.data.meta.success) {
            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = res.data.data;
            document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(() => {
              iframe.remove();
            }, 5 * 60 * 1000);
            this.toggleSelection()

          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    handleSelectionChange (data) {
        console.log(data)
      this.downIds = data
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    downloadTemp (id) {
      let ids = ''
      if (id != 'all') {
        ids = id
      } else {
        if (this.downIds.length > 0) {
          this.downIds.map(item => {
            // ids += item.fileName + ','
            const iframe = document.createElement("iframe");
                iframe.style.display = "none"; // 防止影响页面
                iframe.style.height = 0; // 防止影响页面
                iframe.src = `${window.location.href.split('#')[0]}static/${item.fileName}`;
                // console.log(`${window.location.href.split('#')[0]}static/${item.fileName}`)
                document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
                // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
                setTimeout(() => {
                    iframe.remove();
                }, 5 * 60 * 1000);
          })
        //   console.log(ids)
        } else {
          this.$message.warning('请选择评审材料模板')
        }
      }
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.drillGuide {
    .current-nav {
        float: none;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 30px;
        color: #939393;
        font-size: 14px;
        background: #f3f3f3;
        a {
            color: #939393;
            font-size: 14px;
        }

        i {
            margin: 0 10px;
            font-style: normal;
        }
    }
  .mianOut {
    padding: 0 30px;
    .note {
      height: 42px;
      line-height: 42px;
      p {
        color: #666;
        padding-left: 42px;
        img {
          width: 26px;
          height: 26px;
          margin-right: 5px;
        }
      }
    }
    .asTitle {
      h3 {
        font-weight: bold;
        font-size: 16px;
        color: #666;
        padding: 20px 0 0 20px;
      }
    }
    .mianInner1 {
      background: #fff;
      padding-bottom: 30px;

      .asList {
        width: 300px;
        height: 49px;
        margin: 20px auto;
        border: 1px solid #4080ff;
        border-radius: 8px;
        li {
          float: left;
          width: 50%;
          a {
            display: block;
            color: #666;
            height: 47px;
            text-align: center;
            line-height: 47px;
          }
          a.active {
            color: #fff;
            background: #4080ff;
          }
          a.active:hover {
            color: #fff;
          }
          a:hover {
            color: #4080ff;
          }
        }
        li:first-child {
          a {
            border-radius: 8px 0 0 8px;
          }
        }
        li:last-child {
          a {
            border-radius: 0 8px 8px 0;
          }
        }
      }

      .process {
        text-align: center;
        i {
          font-size: 20px;
          color: #69ed79;
          margin-right: 10px;
          position: relative;
          top: 3px;
        }
        a {
          text-decoration: underline;
          color: #666;
        }
        a:hover{
          color:#4080ff;
        }
      }

      .el-button:hover {
        opacity: 0.8;
      }
      .downBox {
        margin: 40px 0 20px;
        .table_tit {
          font-weight: bold;
          font-size: 16px;
          color: #666;
          float: left;
          margin-left: 100px;
          line-height: 36px;
        }
        .download {
          display: block;
          float: right;
          margin-right: 100px;
          width: 105px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          color: #4080ff;
          border-radius: 8px;
          background: #eefdf4;
          cursor: pointer;
          i {
            font-size: 18px;
            position: relative;
            top: 2px;
          }
        }
        .download:hover {
          opacity: 0.8;
        }
      }
      /*表格*/
      .el-table {
        width: calc(100% - 200px);
        margin: 0 auto;
        border-top: 1px solid #ebeef5;
        a {
          cursor: pointer;
        }
        a:hover {
          color: #4080ff;
        }
        .fileName {
          text-decoration: underline;
          color: #4080ff;
          cursor: pointer;
        }
        .fileName:hover {
          opacity: 0.8;
        }
        .el-button {
          border-radius: 8px;
          border-color: #eef4fd;
          background: #eef4fd;
          height: 36px;
          padding: 0;
          width: 85px;
          color: #4080ff;
        }

        .el-button:hover {
          background: #fff;
          border-color: #4080ff;
        }
        .temName,
        .matName {
          text-decoration: underline;
          color: #333;
        }
        .deleteBtn {
          color: #4080ff;
          margin-left: 10px;
        }
        .deleteBtn:hover {
          opacity: 0.8;
        }
      }

      .el-table th > .cell {
        color: #333333;
        font-weight: bold;
      }
    }
    .mianInner2 {
      background: #fff;
      padding-bottom: 80px;
      margin-top: 30px;

      p {
        line-height: 36px;
        font-weight: bold;
        font-size: 14px;
        color: #666;
        text-align: center;
        margin-top: 60px;

        i {
          font-size: 20px;
          color: #69ed79;
          margin-right: 10px;
          position: relative;
          top: 3px;
        }

        a {
          display: inline-block;
          margin-left: 25px;
          width: 150px;
          height: 36px;
          color: #fff;
          border-radius: 8px;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
          font-weight: normal;
          background: #4080ff;
          background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
        }

        a:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .page-container {
    padding: 28px 0;
    width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .el-pagination {
        float: right;
    }
    .el-button {
        float: right;
        background: #edf4fe;
        width: 50px;
        padding: 0;
        height: 28px !important;
        margin: 4px 10px auto;
        color: #7fa4fc;
        border: 0;
    }
}
}
</style>
